<template>
  <div class="sign">
    <div class="date">
      <span class="day">{{this.today}}</span>
      <span class="week">{{this.week}}</span>
    </div>

    <div class="sign-in" placement="bottom">
      <p v-if="clickSign=='no'" class="noSign" @click="handleSignClick">每日打卡</p>
      <p v-else class="hasSign">已连续打卡<span>1</span>日</p>
    </div>

    <div class="sighHover" style="visibility: hidden">
      <p>今天可领取1枚铜币</p>
      <p>明天可领取2枚铜币</p>
      <p>连续打卡每天增加1，上限5</p>
    </div>

    <div class="helpOther">帮Ta打卡</div>
  </div>
</template>

<script>
export default {
  name: 'Sign',
  data () {
    return {
      clickSign: 'no',
      today: '',
      week: ''
    }
  },
  methods: {
    getDate () {
      const myDate = new Date();
      const thisYear = myDate.getYear();
      let thisMonth = myDate.getMonth()+1;
      let thisDay = myDate.getDate();
      const thisWeek = myDate.getDay();
      const weeks = ["日", "一", "二", "三", "四", "五", "六"];
      if (thisMonth < 10) {
        thisMonth = '0' + thisMonth;
      }
      if (thisDay < 10) {
        thisDay = '0' + thisDay;
      }
      this.today = ''+thisMonth+'.'+thisDay;
      this.week = '周'+''+weeks[thisWeek]+'';
    },
    handleSignInHover () {
      if (this.clickSign === 'no') {
        $('.noSign').hover(function(){
          $('.sighHover').css('visibility','visible');
        },function(){
          $('.sighHover').css('visibility','hidden');
        })
      }
    },
    handleSignClick () {
      this.clickSign = 'yes';
      $('.noSign').hover(function(){
        $('.sighHover').css('visibility','hidden');
      })

    }
  },
  mounted () {
    this.getDate();
    this.handleSignInHover();
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
  .sign
    display: flex
    flex-wrap: no-wrap
    justify-content: center
    align-items: center
    height: .84rem
    background: #ecf3f8
    border: .02rem solid #e2edf2
    margin-bottom: .5rem
    .date
      display: flex
      flex-direction: column
      justify-content: space-around
      background-color: #5aadea
      width: .9rem
      border: 0.01rem solid #5aadea
      border-radius: .06rem
      margin: .04rem
      font-size: .22rem
      color: #fff
      text-align: center
      .day,.week
        height: .36rem
        line-height: .36rem
        font-weight: lighter
      .week
        margin-top: -.05rem
    .date:after
      content: ''
      position: absolute
      width: 0
      height: 0
      margin-left: .9rem
      border-top: .08rem solid transparent
      border-left: .1rem solid #5aadea
      border-bottom: .08rem solid transparent
    .sign-in
      width: 2.2rem
      text-align: center
      .noSign
        color: #3e7aa3
        font-size: .3rem
        font-weight: bold
      .noSign:hover
        text-decoration: underline
        cursor: pointer
      .hasSign
        color: $font-deep
        font-weight: bold
        font-size: .28rem
    .helpOther
      color: $font-blue
      font-size: .24rem
      margin: 0 auto
      padding: .12rem .2rem
      border-left: .01rem solid #c6dae5
    .helpOther:hover
      text-decoration: underline 
    .sighHover
      position: absolute
      width: 3.6rem
      height: 1.32rem
      margin-left: -.2rem
      display: flex
      flex-direction: column
      justify-content: space-around
      align-items: center
      background-color: #fffbe7
      color: $font-welcome
      font-size: .26rem
      border: .02rem solid #f4d1a5
      z-index: $alert-index
      margin-top: 1.2rem
    .sighHover:before
      content: ""
      position: absolute
      top: -.4rem
      margin-left: -.06rem
      border-bottom: .2rem solid #fffbe7
      border-top: .2rem solid transparent
      border-left: .2rem solid transparent
      border-right: .2rem solid transparent
      z-index: 12
    .sighHover:after
      content: ""
      position: absolute
      top: -.46rem
      margin-left: -.06rem
      border-bottom: .23rem solid #f4d1a5
      border-top:.23rem solid transparent
      border-left:.23rem solid transparent
      border-right:.23rem solid transparent
      z-index: 10
      
</style>

